<template>
	<div class="attribute-container">
		<div class="head">
			<div>
				<svg aria-hidden="true" class="svg-icon arrow" @click="handleExpand">
					<use v-if="!isExpand" href="#icon-right_arrow_normal"></use>
					<use v-else href="#icon-below_arrow_normal"></use> 
				</svg>
				<span>变换</span>
			</div>
			<span>
				<el-popover placement="bottom" trigger="click">
				  <template #reference>
					<svg aria-hidden="true" class="svg-icon dot-icon" >
						<use href="#icon-dot_normal"></use>
					</svg>
				  </template>
				  <div>
					<div>
						设置步长
					</div>
					<div>
						<el-input-number
							v-model="step"
							class="item"
							size="small"
							controls-position="right"
						/>
					</div>
				  </div>

				</el-popover>
			</span>
		</div>
 		<div class="body" v-if="isExpand" style="padding: 0 16px;">
			<div class="label">
				<span>位置</span>
			</div>
			<div class="items">
				<el-input-number
				    v-model="location_x"
					class="item"
					size="small"
					:step="step"
				    controls-position="right"
				    @change="onchange"
				/>
				<el-input-number
				      v-model="location_y"
					  class="item"
					  size="small"
					  :step="step"
				      controls-position="right"
				      @change="onchange"
				    />
				<el-input-number
					v-model="location_z"
					class="item"
					size="small"
					:step="step"
					controls-position="right"
					@change="onchange"
				/>
			</div>
			
			<div class="label">
				<span>旋转</span>
			</div>
			<div class="items">
				<el-input-number
				    v-model="rotation_x"
					class="item"
					size="small"
					:step="step"
				    controls-position="right"
				    @change="onchange"
				/>
				<el-input-number
				      v-model="rotation_y"
					  class="item"
					  size="small"
					  :step="step"
				      controls-position="right"
				      @change="onchange"
				    />
				<el-input-number
					v-model="rotation_z"
					class="item"
					size="small"
					:step="step"
					controls-position="right"
					@change="onchange"
				/>
			</div>
			
			<div class="label">
				<span>缩放</span>
			</div>
			<div class="items">
				<el-input-number
				    v-model="scale_x"
					class="item"
					size="small"
					:step="step"
				    controls-position="right"
				    @change="onchange"
				/>
				<el-input-number
				      v-model="scale_y"
					  class="item"
					  size="small"
					  :step="step"
				      controls-position="right"
				      @change="onchange"
				    />
				<el-input-number
					v-model="scale_z"
					class="item"
					size="small"
					:step="step"
					controls-position="right"
					@change="onchange"
				/>
			</div>
		</div>	 
	</div>
</template>


<script lang="ts" setup>
	const isExpand=ref(false);
	const props = defineProps({
	  location: {
		type: String,
		default: () => ""
	  },
	  rotation: {
		type: String,
		default: () => ""
	  },
	  scale: {
		type: String,
		default: () => ""
	  },
	})
	
	const location_x=ref<number>(0);
	const location_y=ref<number>(0);
	const location_z=ref<number>(0);
	
	const rotation_x=ref<number>(0);
	const rotation_y=ref<number>(0);
	const rotation_z=ref<number>(0);
	
	const scale_x=ref<number>(0);
	const scale_y=ref<number>(0);
	const scale_z=ref<number>(0);
	const step=ref(0.01);
	
	watch(props,() => {
			parseLocation(props.location);
			parseRotation(props.rotation);
			parseScale(props.scale);
		},
	    { immediate: true, deep: true },
	)


	function parseLocation(v3:any) {
		if(v3){
			let v3r=v3.split(',');
			if(v3r && v3r.length>0){
				location_x.value=parseFloat(parseFloat(v3r[0]).toFixed(8));
			}
			if(v3r && v3r.length>1){
				location_y.value=parseFloat(parseFloat(v3r[1]).toFixed(8));
			}
			if(v3r && v3r.length>2){
				location_z.value=parseFloat(parseFloat(v3r[2]).toFixed(8));
			}
		}else{
			location_x.value=0;location_y.value=0;location_z.value=0;
		}
	}
	
	function parseRotation(v3:any) {
		if(v3){
			let v3r=v3.split(',');
			if(v3r && v3r.length>0){
				rotation_x.value=parseFloat(parseFloat(v3r[0]).toFixed(8));
			}
			if(v3r && v3r.length>1){
				rotation_y.value=parseFloat(parseFloat(v3r[1]).toFixed(8));
			}
			if(v3r && v3r.length>2){
				rotation_z.value=parseFloat(parseFloat(v3r[2]).toFixed(8));
			}
		}else{
			rotation_x.value=0;rotation_y.value=0;rotation_z.value=0;
		}
	}
	
	function parseScale(v3:any) {
		if(v3){
			let v3r=v3.split(',');
			if(v3r && v3r.length>0){
				scale_x.value=parseFloat(parseFloat(v3r[0]).toFixed(8));
			}
			if(v3r && v3r.length>1){
				scale_y.value=parseFloat(parseFloat(v3r[1]).toFixed(8));
			}
			if(v3r && v3r.length>2){
				scale_z.value=parseFloat(parseFloat(v3r[2]).toFixed(8));
			}
		}else{
			scale_x.value=0;scale_y.value=0;scale_z.value=0;
		}
	}
	
	const handleExpand=()=>{
		isExpand.value=!isExpand.value
	}
	
	const emits = defineEmits(['onchange'])
	const onchange=()=>{
		emits('onchange',{
			type:'transform',
			data:{
				location:location_x.value+','+location_y.value+','+location_z.value,
				rotation:rotation_x.value+','+rotation_y.value+','+rotation_z.value,
				scale:scale_x.value+','+scale_y.value+','+scale_z.value
			}
		})
	}
	defineExpose({
	});
</script>

<style scoped>
	:deep(.el-input-number__decrease) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	:deep(.el-input-number__increase) {
	    background: #333333;
	    font-size: 13px;
		border-bottom: 1px solid #191919 !important;
		border-left: 1px solid #191919 !important;
		width: 16px;
	}
	
	:deep(.el-input-number.is-controls-right .el-input__wrapper) {
		padding-left: 0px;
		padding-right: 6px;
	}
	
	
</style>